// components/tabs/tabs.js
import { throttle } from "../../utils/util"
const moment = require("../../lib/moment")
Component({
  options: {
    multipleSlots: true // 开启多插槽
  },
  /**
   * 组件的属性列表
   */
  properties: {
    tabs: {
      type: Array,
      value: []
    },
    active: {
      type: Number,
      value: 0
  }
  },
  lifetimes: {
    attached() {
      this.data.lastClickTime = moment()
    }
  },
  observers: {
    active: function (active) {
        this.setData({
          currentIndex: active
        })
    }
},
  /**
   * 组件的初始数据
   */
  data: {
    currentIndex: 0,
    lastClickTime: null
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 1. 传入一个数组， 按数组元素内容渲染我们的标签页选项
    // 2. 能够监听点击事件，并且通知使用组件的页面或者父组件，通过事件通知我们选择了什么
    // 通用组件
    // 父组件（页面）通过属性给自定义组件传递参数
    // 自定义组件通过自定义事件给父组件（页面）传递参数
    // 切换tabs 使用节流控制
    handleTabChange: function(e)  {
      const index = e.currentTarget.dataset.index
      // 避免重复点击同一个标签操作
      if( index === this.data.currentIndex) {
        const now = moment()
        const diff = now.diff(this.data.lastClickTime);
        if (diff < 250) {
            this.triggerEvent('doubleclicktab')
        }
        this.data.lastClickTime = now
        return
      }
      this.setData({
        currentIndex: index
      })
      // 发起自定义事件
      this.triggerEvent('change', {index})
    },
    handleTouchMove(e) {
      const direction = e.direction // -1 0 1
      const currentTabIndex = this.data.currentIndex
      const targetTabIndex = currentTabIndex + direction

      // 判断是否在第一页或者最后一页
      if(targetTabIndex < 0 || targetTabIndex > this.data.tabs.length - 1) {
        return
      }

      // 实现 切换
      const customEvent = {
        currentTarget: {
          dataset: {
            index: targetTabIndex
          }
        }
      }
      this.handleTabChange(customEvent)
    }
  }
})